/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  AsyncStorage,
} from 'react-native';

import Account from './Component/Account/account';
import Login from './Component/Account/Login';
import Edit from './Component/Edit/edit';
import List from './Component/List/list';
import Picture from './Component/Picture/picture';

import XTTabbar from './XTTabbar';
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';

import Icon from 'react-native-vector-icons/Ionicons';
import IconFont from 'react-native-vector-icons/FontAwesome';

export default class App extends Component {


  constructor(props) {
    super(props);

    this.state = {
      tabNames: ['视频', '录制', '图片', '我的'],
      tabIconNames: ['ios-videocam', 'ios-recording', 'ios-reverse-camera', 'ios-contact'],
      isLogined: false,
      account: null,
    };

    this._asyncSaveAccountInfo = this._asyncSaveAccountInfo.bind(this)
    this._logout = this._logout.bind(this)
  }

  componentDidMount() {
      this._asyncGetAccountInfo()
  }

  _asyncGetAccountInfo() {
      AsyncStorage.getItem('Account')
      .then((data) => {
          if (data) {
              let oldAccount = JSON.parse(data)
              if (oldAccount && oldAccount.accessToken) {
                  this.setState({
                      isLogined: true,
                      account: oldAccount,
                  })
              }
          }
      })
      .catch((error) => {
          console.log(error);
      })
  }

  _asyncSaveAccountInfo(data) {
      let account = data.data
      if (account && account.accessToken) {
          let userInfo = JSON.stringify(account)
          AsyncStorage.setItem('Account', userInfo)
          .then(() => {
              this.setState({
                  isLogined: true,
                  account: account,
              })
          })
          .catch((error) => {
              console.log(error);
          })
      }
  }

  _logout() {
      console.log('删除账户');
      AsyncStorage.removeItem('Account')

      this.setState({
          isLogined: false,
          account: null,
      })
  }

  render() {

      if (!this.state.isLogined) {
          return (
              <Login saveAccount={this._asyncSaveAccountInfo}/>
          )
      }

    let tabNames = this.state.tabNames;
    let tabIconNames = this.state.tabIconNames;
    return (
      <ScrollableTabView
        // renderTabBar={() => <ScrollableTabBar/>}
        renderTabBar={() => <XTTabbar tabNames={tabNames} tabIconNames={tabIconNames}/>}
        tabBarPosition='bottom'
        onChangeTab={
          (obj) => {
            console.log('被选中的tab下标：' + obj.i);
          }
        }

        onScroll={
          (position) => {
            console.log('滑动时的位置：' + position);
          }
        }
        locked={true}
        initialPage={3}

        prerenderingSiblingsNumber={1}
        >

        <Navigator
            tabLabel="list"
            initialRoute={{name: 'list', component: List}}
            configureScene={(route) => {
                return Navigator.SceneConfigs.PushFromRight
            }}
            renderScene={(route, navigator) => {
                let Component = route.component
                return (
                    <Component {...route.params} navigator={navigator}/>
                )
            }}
        />

        <Edit tabLabel="edit"/>
        <Picture tabLabel="picture"/>
        <Account tabLabel="account" logout={this._logout}/>

      </ScrollableTabView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
